<template>
  <div class="activity">
    <div class="contain">
      <div class="con-info">
        <div class="caption">
          <h5 class="user-icon user-icon_zx"></h5>
          <p class="crumbs">
            <em class="user-icon user-icon_ling"></em>
            您的位置：
            <!-- <a>{{breadcrumb.trail1.text}}</a>> -->
            <router-link to="/">{{breadcrumb.trail1.text}}</router-link>>
            <a>{{breadcrumb.trail2.text}}</a>
            >{{breadcrumb.trail2.children.text}}
          </p>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in tabList">
              <a>
                <img :src="item.imageUrl" :alt="item.text" />
                <div class="informa">
                    <p class="title">{{item.title}}</p>
                    <p class="time">{{item.startTime}}至{{item.endTime}}</p>
                </div>
                <div class="texter">
                    <p>{{item.text}}</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      breadcrumb: "",
      tabList: ""
    };
  },
  created() {
    this.breadcrumb = this.$route.query;
    this.$ajax.get("../../../../static/data.json").then(res => {
      this.tabList = res.data.activityList;
      for (let i = 0; i < this.tabList.length; i++) {
        const element = this.tabList[i];
        this.tabList[i].imageUrl = require("" + element.imageUrl + "");
      }
    });
    console.log(this.tabList);
  }
};
</script>
<style scope>
@import url("../../../src/assets/css/activity.css");
</style>